<template>
	<view class="page">
		<image class="image-bg" src="/static/images/home/background.png"></image>
		<view class="block_1">
			<view class="group_1">
				<view class="section_7">
					<text class="text_2">首页</text>
					<view class="button-group">
						<image class="button-image" src="/static/images/home/language.png" mode="widthFix"></image>
						<image class="button-image" src="/static/images/home/menu.png" mode="widthFix" @tap="openMenu">
						</image>
					</view>
				</view>
				<view class="banner">
					<swiper autoplay="true" interval="4000" circular="true">
						<swiper-item v-for="i,index in 10" :key="i">
							<view>
								<image src="../../static/images/home/slices.png">
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="box_18">
				<view class="box_19">
					<!-- 我的资产 -->
					<view class="section_8">
						<image class="title-images-one" src="@/static/images/home/title_one.png" mode="widthFix">
						</image>
						<view class="block_8 flex-row justify-between">
							<view class="section_1" @tap="navigateTo1()">
								<view class="box_20 flex-row justify-between">
									<view class="group_10"></view>
									<text class="text_11">我的余额</text>
								</view>
								<text class="text_12">0.0000</text>
							</view>
							<view class="section_2" @tap="navigateTo2()">
								<view class="box_21 flex-row justify-between">
									<view class="block_4"></view>
									<text class="text_13">NOSA</text>
								</view>
								<text class="text_14">0.0000</text>
							</view>
							<view class="section_2" @tap="navigateTo3()">
								<view class="box_21 flex-row justify-between">
									<view class="block_4"></view>
									<text class="text_13">燃料</text>
								</view>
								<text class="text_14">0.0000</text>
							</view>
						</view>
						<!-- <view class="text-group_8">
							<view class="text-group_7">
								<image class="title-images-two" src="@/static/images/home/title_two.png"
									mode="widthFix"></image>
							</view>
						</view>
						<view class="box_7">
							<view class="text-wrapper_11 flex-row justify-between">
								<text class="text_18">第一期&nbsp;倒计时</text>
								<text class="text_19">20:00:00</text>
							</view>
							<view class="text-wrapper_12 flex-row justify-between">
								<text class="text_20">第一轮</text>
								<text class="text_21">$666.88</text>
							</view>
							<view class="text-wrapper_13 flex-row justify-between">
								<text class="text_22">开始时间</text>
								<text class="text_23">2022.12.12&nbsp;18:00:00</text>
							</view>
							<view class="box_22 flex-row justify-between">
								<view class="block_5">
									<view class="box_9"></view>
								</view>
								<text class="text_24">已筹100%</text>
							</view>
							<view class="text-wrapper_6">
								<text class="text_25">立即预约</text>
							</view>
						</view> -->
					</view>
					<!-- <view class="block_6">
						<view class="group_11">
							<view class="box_23 flex-row justify-between">
								<view class="group_12"></view>
								<text class="text_26">燃料</text>
							</view>
							<text class="text_27">0.0000</text>
						</view>
					</view> -->
					<image class="right-background"
						src="@/static/images/home/SketchPngda319eb6d229e99e121e80022818683e481a3e4764f9499285d1be98f7432ed1.png"
						mode="widthFix"></image>
				</view>
				<!-- <view class="box_24 flex-row">
					<view class="text-group_9">
						<image class="title-images-two" src="@/static/images/home/title_three.png" mode="widthFix">
						</image>
					</view>
				</view> -->
				<!-- <view class="box_11">
					<view class="text-wrapper_14 flex-row justify-between">
						<text class="text_31">第一期&nbsp;倒计时</text>
						<text class="text_32">20:00:00</text>
					</view>
					<text class="text_33">第二轮</text>
					<view class="text-wrapper_15 flex-row justify-between">
						<text class="text_34">开始时间</text>
						<text class="text_35">2022.12.12&nbsp;18:00:00</text>
					</view>
					<view class="box_12">
						<view class="section_5"></view>
					</view>
				</view> -->
				<!-- 抢购活动 -->
				<view class="box_19">
					<view class="section_8">
						<image class="title-images-two" src="@/static/images/home/title_two.png" mode="widthFix">
						</image>
						<view class="auction">
						<!-- 轮播图 -->
							<swiper :indicator-dots="indicatorDots" next-margin="200rpx" circular autoplay @change="swiperChange">
								<swiper-item>
									<view class="box_7">
										<view class="text-wrapper_11 flex-row justify-between">
											<text class="text_18">第一期&nbsp;倒计时</text>
											<text class="text_19">20:00:00</text>
										</view>
										<view class="text-wrapper_12 flex-row justify-between">
											<text class="text_20">第一轮</text>
											<text class="text_21">$666.88</text>
										</view>
										<view class="text-wrapper_13 flex-row justify-between">
											<text class="text_22">开始时间</text>
											<text class="text_23">2022.12.12&nbsp;18:00:00</text>
										</view>
										<view class="box_22 flex-row justify-between">
											<view class="block_5">
												<view class="box_9"></view>
											</view>
											<text class="text_24">已筹100%</text>
										</view>
										<view class="text-wrapper_6">
											<text class="text_25">立即预约</text>
										</view>
									</view>
								</swiper-item>
								<swiper-item>
									<view class="box_7">
											<view class="text-wrapper_11 flex-row justify-between">
												<text class="text_18">第一期&nbsp;倒计时</text>
												<text class="text_19">20:00:00</text>
											</view>
											<view class="text-wrapper_12 flex-row justify-between">
												<text class="text_20">第二轮</text>
												<text class="text_21">$666.88</text>
											</view>
											<view class="text-wrapper_13 flex-row justify-between">
												<text class="text_22">开始时间</text>
												<text class="text_23">2022.12.12&nbsp;18:00:00</text>
											</view>
											<view class="box_22 flex-row justify-between">
												<view class="block_5">
													<view class="box_9"></view>
												</view>
												<text class="text_24">已筹100%</text>
											</view>
											<view class="text-wrapper_6">
												<text class="text_25">立即预约</text>
											</view>
										</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
				<!-- 邀请好友 -->
				<view class="box_19">
					<view class="section_8">
						<image class="title-images-two" src="@/static/images/home/title_three.png" mode="widthFix">
						</image>
						<view class="group_14 flex-row">
							<text class="text_36">www.ghujilk;oucghuij;ok;jil</text>
							<view class="box_13"></view>
							<view class="box_14"></view>
						</view>
					</view>
				</view>
				<!-- 联系我们 -->
				<view class="box_19">
					<view class="section_8">
						<image class="title-images-two" src="@/static/images/home/title_four.png" mode="widthFix">
						</image>
						<view class="list_2 flex-row">
							<view class="list-items_1" v-for="(item, index) in loopData0" :key="index">
								<image class="list-items_1" :src="item" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="group_13">
				<!-- <view class="group_15"></view> -->
				<image class="tag-images" src="/static/images/home/bottom_tag.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 菜单按钮 -->
		<u-popup :show="showMenu" mode="right" @close="closeMenu" @open="openMenu" :closeOnClickOverlay="false">
			<view class="menu-content">
				<view class="top-content">
					<image class="title" src="/static/images/home/menu/title.png" mode="widthFix"></image>
					<block v-for="(res, index) in menuList" :key="index">
						<view :class="`menu-button ${index == 0 ? 'active-background' : ''}`" @tap="navigateTo(index)">
							<image class="menu-icon" :src="res.buttonUrl" mode="widthFix"></image>
							<text class="menu-text">{{ res.title }}</text>
						</view>
					</block>
				</view>
				<view class="menu-button-two" @tap="closeMenu">
					<image class="menu-icon" src="/static/images/home/menu/close.png" mode="widthFix"></image>
					<text class="menu-text">关闭</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {

				/* 菜单按钮 */
				showMenu: true,
				menuList: [{
					title: '首页',
					buttonUrl: '/static/images/home/menu/home.png',
				}, {
					title: '我的团队',
					buttonUrl: '/static/images/home/menu/team.png',
				}, {
					title: '我的参与',
					buttonUrl: '/static/images/home/menu/mine.png',
				}, {
					title: '提现',
					buttonUrl: '/static/images/home/menu/deposit.png',
				}, {
					title: '兑换',
					buttonUrl: '/static/images/home/menu/exchange.png',
				}, {
					title: '提现记录',
					buttonUrl: '/static/images/home/menu/history.png',
				}, {
					title: '兑换记录',
					buttonUrl: '/static/images/home/menu/record.png',
				}, {
					title: '关于NOSA',
					buttonUrl: '/static/images/home/menu/about.png',
				}], // 按钮数组

				/* 底部按钮 */
				loopData0: [
					'/static/images/home/telegram.png',
					'/static/images/home/eMail.png',
					'/static/images/home/twitter.png',
					'/static/images/home/facebook.png'
				],
				constants: {},

			};
		},
		methods: {

			/* 菜单按钮 */
			// 打开菜单页面
			openMenu() {
				this.showMenu = true;
				// console.log('open');
			},
			// 关闭菜单页面
			closeMenu() {
				this.showMenu = false
				// console.log('close');
			},
			
			/* 页面跳转 */
			navigateTo(option) {
				const that = this;
				if (option == 1) {
					uni.navigateTo({
						url: '/pages/team/team'
					})
					return;
				} else if (option == 2) {
					uni.navigateTo({
						url: '/pages/mine/mine'
					})
					return;
				} else if (option == 3) {
					uni.navigateTo({
						url: '/pages/deposit/deposit'
					})
					return;
				} else if (option == 4) {
					uni.navigateTo({
						url: '/pages/exchange/exchange'
					})
					return;
				} else if (option == 5) {
					uni.navigateTo({
						url: '/pages/history/history'
					})
					return;
				} else if (option == 6) {
					uni.navigateTo({
						url: '/pages/record/record'
					})
					return;
				} else if (option == 7) {
					uni.navigateTo({
						url: '/pages/about/about'
					})
					return;
				}
			},
			/*首页三个导航栏跳转*/
			navigateTo1(){
				uni.navigateTo({
					url: '/pages/mymoney/mymoney'
				})
				return;
			},
			navigateTo2(){
				uni.navigateTo({
					url: '/pages/nosa/nosa'
				})
				return;
			},
			navigateTo3(){
				uni.navigateTo({
					url: '/pages/ranliao/ranliao'
				})
				return;
			},
		},
		/*轮播图*/
		swiperChange(e) {
			this.dontFirstAnimation = false
			this.currentIndex = e.detail.current
		},
	};
</script>

<style lang="scss">
	@import "@/static/css/home.scss";
</style>
